<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form>
    First Name: <input type="text" ng-model="firstname">
    <p>我的输入值{{firstname}}</p>
  </form>

  <form>
        选中复选框，显示标题:
        <input type="checkbox" ng-model="myVar">
    </form>
    <h1 ng-show="myVar">My Header</h1>


    <form> 
        选择一个选项:
        <input type="radio" ng-model="myVar" value="dogs">Dogs
        <input type="radio" ng-model="myVar" value="tuts">Tutorials
        <input type="radio" ng-model="myVar" value="cars">Cars
    </form>
        
        <div ng-switch="myVar">
        <div ng-switch-when="dogs">
            <h1>Dogs</h1>
            <p>Welcome to a world of dogs.</p>
        </div>
        <div ng-switch-when="tuts">
            <h1>Tutorials</h1>
            <p>Learn from examples.</p>
        </div>
        <div ng-switch-when="cars">
            <h1>Cars</h1>
            <p>Read about cars.</p>
        </div>
        </div>
        
        <p>ng-switch 指令根据单选按钮的选择结果显示或隐藏 HTML 区域。</p>

        <form>
            选择一个选项:
            <select ng-model="myVar">
                <option value="">
                <option value="dogs">Dogs
                <option value="tuts">Tutorials
                <option value="cars">Cars
            </select>
            </form>
              
        <div ng-switch="myVar">
            <div ng-switch-when="dogs">
            <h1>Dogs</h1>
            <p>Welcome to a world of dogs.</p>
            </div>
            <div ng-switch-when="tuts">
            <h1>Tutorials</h1>
            <p>Learn from examples.</p>
            </div>
            <div ng-switch-when="cars">
            <h1>Cars</h1>
            <p>Read about cars.</p>
            </div>
        </div>
        
        <p>ng-switch 指令根据下拉菜单的选择结果显示或隐藏 HTML 区域。</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.firstname = "John";
});
</script>

</body>
</html>